<template>
    <div>
        <el-row class="section">
            <el-col class="offset">
                <div class="info">
                    <div class="line"></div>
                    <div class="text">基本信息</div>
                </div>
            </el-col>
            <el-col>
                <el-descriptions class="offset" style="margin-top: 20px; margin-bottom: 20px;">
                    <el-descriptions-item label="入库单据号">{{ orderParam.inboundDonumber }}</el-descriptions-item>
                    <el-descriptions-item label="入库方式">{{ orderParam.inboundMethodName }}</el-descriptions-item>
                    <el-descriptions-item label="采购人">{{ orderParam.purchaser }}</el-descriptions-item>
                    <el-descriptions-item label="采购价">{{ orderParam.purchasePrice }}</el-descriptions-item>
                    <el-descriptions-item label="生产厂商">{{ orderParam.manufacturerName }}</el-descriptions-item>
                    <el-descriptions-item label="登记人">{{ orderParam.registrants }}</el-descriptions-item>
                    <el-descriptions-item label="登记时间">{{ orderParam.registTime }}</el-descriptions-item>
                    <el-descriptions-item label="审核备注">{{ orderParam.remark }}</el-descriptions-item>
                </el-descriptions>
            </el-col>
            <el-col class="offset">
                <div class="info">
                    <div class="line"></div>
                    <div class="text">物资入库详情</div>
                </div>
            </el-col>
            <el-col class="offset">
                <el-table :data="tableData" style="width: 90%" height="250">
                    <el-table-column prop="id" label="序号" width="70">
                    </el-table-column>
                    <el-table-column prop="itemCode" label="物资编码" width="110">
                    </el-table-column>
                    <el-table-column prop="itemName" label="物资名称" width="150">
                    </el-table-column>
                    <el-table-column prop="manufacturerName" label="生产厂商" width="190">
                    </el-table-column>
                    <el-table-column prop="store" label="数量">
                    </el-table-column>
                    <el-table-column prop="packingUnits" label="单位">
                    </el-table-column>
                    <el-table-column prop="purchasePrice" label="采购价">
                    </el-table-column>
                    <el-table-column prop="retailPrice" label="零售价">
                    </el-table-column>
                    <el-table-column fixed="right" prop="purchasePriceTotal" label="采购总价">
                    </el-table-column>
                    <el-table-column fixed="right" prop="retailPriceTotal" label="零售总价">
                    </el-table-column>
                </el-table>
            </el-col>
            <el-col class="offset offset2">
                <el-button type="small" style="color:blue;" @click="auditIn">审核通过</el-button>
                <el-button type="small" style="color:red;" @click="auditOut">审核驳回</el-button>
                <el-button type="small" @click="Cancel">取消</el-button>
            </el-col>
        </el-row>
    </div>
</template>

<script>
export default {
    data() {
        return {
            id: '',
            tableData: [],
            orderParam: {},
            inboundDonumber: ''
        }
    },
    methods: {
        //根据id查询物资入库表
        queryMaterialStorageById() {
            this.$axios.get('api/materialStorage/queryMaterialStorageById/' + this.id)
                .then(res => {
                    if (res.data.code == 200) {
                        this.orderParam = res.data.data
                        this.inboundDonumber = this.orderParam.inboundDonumber
                        this.queryMaterialStorageItem();
                    }
                })
        },
        //根据入库单据号查询明细
        queryMaterialStorageItem() {
            this.$axios.get('api/materialStorage/queryMaterialStorageItem/' + this.inboundDonumber)
                .then(res => {
                    if (res.data.code == 200) {
                        this.tableData = res.data.data
                    }
                })
        },
        Cancel() {
            this.$router.push({ path: '/materialStorage' })
        },
        auditIn() {
            this.$axios.get('api/materialStorage/updateMaterialStorageStatus/' + this.id)
                .then(res => {
                    if (res.data.code == 200) {
                        this.$message({
                            type: 'success',
                            message: '审批成功!'
                        });
                        this.$router.push({ path: '/materialStorage' })
                    }
                })
        },
        auditOut() {
            this.$axios.get('api/materialStorage/updateMaterialStorageStatus0/' + this.id)
                .then(res => {
                    if (res.data.code == 200) {
                        this.$message({
                            type: 'success',
                            message: '审核驳回!'
                        });
                        this.$router.push({ path: '/materialStorage' })
                    }
                })
        }
    },
    created() {
        this.id = this.$route.query.id
        this.queryMaterialStorageById();
    }
}
</script>

<style scoped>
.section {
    width: 1100px;
    height: 800px;
    background-color: white;
    margin-left: 100px;
    margin-top: 20px;
}

.offset {
    margin-top: 25px;
    margin-left: 50px;
}

.offset1 {
    margin-left: 1px;
}

.offset2 {
    margin-left: 800px;
}

.info {
    display: flex;
    align-items: center;
}

.line {
    width: 3px;
    /* 改变线的宽度 */
    height: 20px;
    /* 改变线的高度 */
    background-color: rgb(0, 174, 255);
    /* 改变线的颜色 */
    margin-right: 8px;
}

.text {
    color: rgb(0, 174, 255);
}
</style>